<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)">
					<view class="flex">操作历史
						<view class="flex align-center u-m-l-20" @click.stop="sortHandle" style="opacity: 0.6;">
							<u-image src="@/static/image/sort.png" width="15" height="15"></u-image><text class="u-m-l-5" style="color: #16254e;font-size: 15px;font-weight: 400;">排序</text>
						</view>
					</view>
					
					<u-icon v-show="!isCollapse" name="arrow-up" color="#000a7b"></u-icon>
					<u-icon v-show="isCollapse" name="arrow-down" color="#000a7b"></u-icon>
				</view>
				
				<u-steps current="0" direction="column" dot v-if="!isCollapse" style="margin-top: 14px;">
					<u-steps-item v-for="item in taskInfo" :key="item.id" :title="getTitle(item)" :desc="item.lastUpdateTime">
						<template #icon>
							<text class="slot-icon" :class="getColor(item)"> </text>
						</template>
					</u-steps-item>
				</u-steps>
			</view>
		</view>
	</view>
</template>

<script setup name="DeviceInfoTemplate">
const props = defineProps({
	taskInfo: {
		type: Array,
		default: () => []
	}
});
const emit = defineEmits(['sort']);

const { taskInfo } = toRefs(props);

// 是否折叠
const isCollapse = ref(false);

// 排序
function sortHandle(event) {
	emit('sort')
};

function getTitle(self) {
	let str = `${self.lastUpdatedUserName}【${self.operateType}】`
	if (self.operateType === "关闭" || self.operateType === "重新维修") {
		str = `${str} ${self.operateResult}`
	}
	if (self.operateType === "转交" || self.operateType === "指派") {
		str = `${str} ${self.operateResult}`
	}
	return str
}

function getColor(data) {
	if (data.operateType == "关闭" || data.operateType == "重新维修") {
	    return "danger";
	  } else if (
	    data.operateType == "转交" ||
	    data.operateType == "指派" ||
	    data.operateType == "委外开始"
	  ) {
	    return "warning";
	  } else if (data.operateType == "完成确认") {
	    return "success";
	  } else {
	    return "primary";
	  }
}
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 6px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
.u-steps-item--column {
	padding-bottom: 10px;
}
:deep(.u-text__value--content) {
	font-size: 14px !important;
}
:deep(.u-text__value--tips) {
	font-size: 13px !important;
	margin-top: 2px !important;
}
.slot-icon {
	width: 12px;
	height: 12px;
	border-radius: 12px;
	text-align: center;
	// background-color: red;
}

.danger {
	background-color: #fa3534;
}

.success {
	background-color: #19be6b;
}

.warning {
	background-color: #f29100;
}

.primary {
	background-color: #2979ff;
}
</style>
